<template>
  <div class="status">
            <ul>
                <li>全部任务({{this.$store.state.list.length}})</li>
                <li>已完成({{this.$store.state.list.length-this.$store.getters.unFinishCount}})</li>
                <!-- 计算属性作为变量不加括号，有重复只计算一次 -->
                <li class="none">未完成({{this.$store.getters.unFinishCount}})</li>
            </ul>
        </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
        .status ul{
            width: 100%;
            height: 20px;
            display: flex;
            list-style: none;
            margin: 10px 0;
        }
        .status li {
            flex: 1;
            margin: 5px;
            padding: 5px;
            height: 20px;
            background-color: lightblue;
            border-radius: 5px;
            text-align: center;
            font-size: 14px;
        }
        .status .none{
            background-color: red;
            color: white;
        }

</style>